說實話，第一次聽到“響應式圖標”我也覺得怪怪的，正如不久之前，人們為了讓圖標字體更適合不同設備，而更改它們的大小一樣，但是這一想法卻讓響應式設計以及圖標設計有了長足的進步。那么今天，我們就來八一八，這到底什么個什么玩意兒。

推薦閱讀：
《想學響應式設計？來看史上最全的響應式設計資源庫》
《來試試響應式設計！25例優秀的響應式網頁設計賞析》
《8個在網頁設計中即將被淘汰的趨勢》

他是什么？

響應式圖標并不是說圖標大小會隨屏幕尺寸的變動而改變，而是意味著圖標會根據自己所處何種設備來改變自身大小。這就意味著屏幕尺寸對圖標來說不是那么重要了，因為它能自動調節，它可以變大變小——同一時間，同一屏幕。圖標的設計上的差別不會太明顯，一般都是細節問題。詳細請看下圖：

響應式圖標很重要嗎？

隨著字體圖標、響應式網頁以及微型設計的流行，我們的風格也隨著改變，設計里的扁平化圖標越來越多。我覺得這個東西有人接受那肯定就有人不愿意接受，不愿改變的不一定就是做的不好的，但是我相信走在改革前沿的肯定比沒有動作的人領先一大截。

響應式圖標推動了圖標設計的發展，讓用戶得到了更好的體驗，操作性更好，視覺效果更佳。為了讓網頁更加優秀，我們提出了響應式圖標，這也是每個設計師以及用戶心里所想、所愿。

Iconic？

如果你沒有聽說過iconic，那它可能就是一個產品，但是我覺得你肯定看到過，因為iconic制作了一系列非常流行的圖標，幾乎人盡皆知。這個團隊致力于開發響應式圖標，可以說他們是響應式圖標背后的男人。

Iconic近期干過最大的一票是成功發起并完成?Kickstarted運動，這讓他們獲得92624美元的利潤，是的你沒看錯，我也沒有忘記小數點，這超出他們預期的15000美元的618%。有了這些錢，他們就可以進行深入研究，讓響應式圖標變得更好。所以說，有些事情你做了才知道對不對、行不行，就像你不知道他們最初的目的僅僅是對網頁圖標進行改革。

如果我想做響應式圖標，怎么做？

如果你準備開發響應式圖標，這里有幾種方法供你選擇，這些方法是iconic已經摸索到的、可能的方法，供你參考。

Media queries

這是迄今為止最簡單的方式，其允許我們在不改變內容的情況下，改變頁面的布局以適應不同的設備，以此加強體驗。但是這種方法也有弊端，它無法將細節處理完美。從表面上看，media queries仍舊是響應式圖標設計的核心方法，試試就知道。

polyfills

很多人都不知道它是什么，所以我跟大家解釋一下：你可以把它想象成media queries，只不過是由元素組成。比如說下面的例子，它的意思是當頁腳大于等于250px時，背景變為白色。這種方法比media queries要直接精確一些。

元素查詢是一個新興概念，不是所有的瀏覽器都支持，不過若你使用javascript，它就可以正常工作，詳細了解請點擊：?here

SVG窗口

SVG窗口這個方法有點兒意思嗬，完完全全意料之外。SVG允許動態控制元素以及圖標，這也給圖標設計帶來了新的方向。試想一下，如果將SVG與media queries相結合，那么圖標就可以自己感受屏幕的大小隨之改變了~但是這點實現起來有一定的難度…就像SVG窗口很難和DOM相結合一樣。

總結

師父領進門，修行在個人，今天我們帶你感受了一下響應式圖標，對此，你心里的想法是…？請在下方的評論里告訴我們吧~

翻譯小組：優設網SDC翻茄匠 微博ID:?@豆池麥
原文地址：designmodo
本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：